<template>
	<view class="container">
		<view class="content" v-for="(item,index) in safeStockList" :key='index'>
			<view class="goodsStockName">
				<view class="goodsStockNameLeft">
					{{item.goodsName}}<span style='margin-left: 20rpx;'>{{item.goodsMatcode}}</span>
				</view>
				<view class="goodsStockNameRight">
					{{stockGoodsOutData[item.stockGoodsOutType]}}
				</view>
			</view>
			<view class="goodsStockInfo">
				<view class="goodsStockInfoLeft">
					产品码
				</view>
				<view class="goodsStockInfoRight">
					{{item.goodsUniqueCode.substring(0, 16)}}
				</view>
			</view>
			<view class="goodsStockInfo">
				<view class="goodsStockInfoLeft">
					日期
				</view>
				<view class="goodsStockInfoRight">
					{{item.createTime}}
				</view>
			</view>
		</view>
		<view class="content" v-if="safeStockList.length>0">
			<view class="goodsStockSum">
				<view class="goodsStockSumLeft">
					总计：
				</view>
				<view class="goodsStockSumRight" >
					{{safeStockList.length}}个
				</view>
			</view>
		</view>
		<!-- <view @tap="modalShowFun" class="updataButton yesClick" v-if="safeStockList.length>0">
			出库
		</view> -->
		<view class="bot-btn-wrap fix-bot bg-none">
			<!-- #ifdef MP-WEIXIN || APP-PLUS-->
			<view @tap="showCashScan" class="mix-btn-content" >
				<text class="mix-text">添加</text>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5-->
			<view @tap="showHfiveScan" class="mix-btn-content" >
				<text class="mix-text">添加</text>
			</view>
			<!-- #endif -->
			<view @tap="modalShowFun" class="mix-btn-content" >
				<text class="mix-text">提交</text>
			</view>
		</view>
		<!-- <view class="scan-wrap" v-if="cashScanFlag">
			<camera-scan :scanTip="scanTip" @close="closeCashScan" @scanCode="cashScanCode"></camera-scan>
		</view> -->
		<!-- 扫码功能 -->
		<!-- 兼容微信小程序 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="scan-wrap" v-if="cashScanFlag">
			<camera-scan :scanTip="scanTip" @close="closeCashScan" @scanCode="cashScanCode"></camera-scan>
		</view>
		<!-- #endif -->
	
		<loading></loading>
		<tui-modal :show="modalShow" @click="modalClick" @cancel="modalCancel" :title="modalContent"></tui-modal>
		<tui-modal :stockErrorShow="errorShow" :contentList='contentList' :button="button" @click="errorClick" @cancel="errorCancel" title="提示" :content="errorContent"></tui-modal>
		<!--共通错误-->
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	// #ifdef MP-WEIXIN
	import cameraScan from "@/packageC/components/camera/camera.vue"
	// #endif
	export default {
		mixins: [mixin, MescrollMixin],
		components: {
		
			// #ifdef MP-WEIXIN
			cameraScan,
			// #endif
		},
		data() {
			return {
				searchKey: "", //搜索关键词
				safeStockList: [],
				beginDate: '',
				endDate: '',
				popupShow: false,
				cashScanFlag: false,
				resultFag:false,
				modalShow:false,
				modalContent: "确认将产品出库吗？",
				stockGoodsOutData:['','销售出库','线下出库','返厂出库','过期出库'],
				type:'', // 出库类型
				errorShow:false,
				errorContent: "以上商品已出库，请扫描其他商品",
				scanTip:'请扫描商品二维码',
				button:[{
						text: "关闭",
						type: "primary",
						plain: false //是否空心
					}],
				contentList:[]
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options){
				this.type=options.type
			}
			if(this.safeStockList<=0){
				// #ifdef MP-WEIXIN || APP-PLUS
				this.showCashScan()
				// #endif 
				// #ifdef H5
				this.showHfiveScan()
				// #endif
			}
		},
		onShow() {
			// #ifdef APP-PLUS
			this.$eventHub.$off('appScanCode');
			this.$eventHub.$on('appScanCode',(codeRes) => {
				this.cashScanCode(codeRes)
			});
			// #endif
		},
		methods: {
			showCashScan() {
				this.cashScanFlag = true
				// #ifdef APP-PLUS
				uni.navigateTo({
					url:'/packageC/pages/scan/scan'
				})
				// #endif
			},
			closeCashScan() {
				if(this.safeStockList<=0){
					uni.navigateBack()
				}
				this.cashScanFlag = false
				// #ifdef APP-PLUS
				this.$eventHub.$emit('appScanClose');
				// #endif
			},
			showHfiveScan(){
				this.$wechat.scanQRCode((str) => {
				     //str为扫码结果
					this.cashScanCode(str)
				});
			},
			errorClick(e){
				const that = this;
				let index = e.index;
				if(index == 0) {
					// 取消
					this.errorCancel();
					uni.navigateBack()
				}else if(index == 1){
					this.errorCancel();
					uni.navigateBack()
				}
				
			},
			errorCancel(){
				this.errorShow=false;
			},
			cashScanCode(codeRes) { //扫码结果
				console.log(codeRes)
				// var res=JSON.parse(codeRes)
				
				if(codeRes.indexOf('=')<0){
					uni.showToast({
						icon: 'none',
						title: '请扫描正确的商品二维码',
						duration: 1000,
					})
					// #ifdef H5
					setTimeout(() => {
						that.$wechat.scanQRCode((str) => {
						 that.cashScanCode(str)
						});
					}, 1000);
					// #endif
					return
				}
				var res=codeRes.split('=')
				if(res[1].length!==29){
					uni.showToast({
						icon: 'none',
						title: '请扫描正确的商品二维码',
						duration: 1000,
					})
					// #ifdef H5
					setTimeout(() => {
						that.$wechat.scanQRCode((str) => {
						 that.cashScanCode(str)
						});
					}, 1000);
					// #endif
					return
				}
				let erweimaFlg=false
				this.safeStockList.forEach(item=>{
					if(res[1].slice(0,16)==item.goodsUniqueCode.slice(0,16)){
						uni.showToast({
							icon: 'none',
							title: '该商品已扫描过，请扫描其他商品',
							duration: 1000,
						})
						erweimaFlg=true
					}
				})
				if(erweimaFlg){
					// #ifdef H5
					setTimeout(() => {
						that.$wechat.scanQRCode((str) => {
						 that.cashScanCode(str)
						});
					}, 1000);
					// #endif
					return
				}
				// this.cashScanFlag = false
				let params = {
					// goodsUniqueCode: res.goodsUniqueCode,
					goodsUniqueCode: res[1],
					type: 2,
					stockGoodsOutType:Number(this.type)
				}
				this.$http.tEsGoodsInit(params).then((res) => {
					if (res.status === 0) {
						let dataList=[]
						dataList = res.data;
						if(dataList){
							dataList.forEach((item)=>{
								this.safeStockList.push(item)
							})
						}
						uni.showToast({
							icon: 'none',
							title: '扫描成功',
							duration: 2000,
						})
						// #ifdef H5
						setTimeout(() => {
							that.$wechat.scanQRCode((str) => {
							 that.cashScanCode(str)
							});
						}, 1000);
						// #endif
						
					}else{
						this.closeCashScan()
					}
				}).catch(()=>{
					this.closeCashScan()
				})

			},
			modalShowFun(){
				this.modalShow=true;
			},
			modalClick(e){
				const that = this;
				let index = e.index;
				if(index == 0) {
					// 取消
					this.modalCancel();
				}else if(index == 1){
					this.preserve()
				}
				
			},
			modalCancel(){
				this.modalShow=false;
			},
			preserve (){
				if(this.safeStockList.length<=0){
					uni.showToast({
						icon: 'none',
						title: '请添加出库商品',
						duration: 1000,
					})
					return
				}
				let params = {};
				let goodList = [];
				this.safeStockList.forEach((item)=>{
					goodList.push({
						goodsUniqueCode:item.goodsUniqueCode,
						goodsId:item.goodsId,
						goodsMatcode:item.goodsMatcode,
						goodsName:item.goodsName,
						stockGoodsOutType:item.stockGoodsOutType,
						business:item.business,

					})
				})
				params.goodList=goodList
				this.$http.tEsStockGoodsOutCreate(params).then((res) => {
					this.modalShow=false;
					if (res.status === 0) {
						console.log(1111)
						this.modalShow=false;
						if(goodList.length!=res.data.length){
							this.$eventHub.$emit('reduceStockList');
							this.$eventHub.$emit('reduceStockNum');
						}
						this.errorContent=''
						if(res.data.length>0){
							this.contentList=res.data
							this.errorContent='2'
							this.errorShow=true
						}else{
							uni.redirectTo({
								url:'../stockManage/deliverySuccess?title=产品出库成功'
							})
						}
					}
				})
			},
			viewOrder(){
				uni.navigateBack()
				this.resultFag=false
			},
			recordsIcon() {
				this.recordsList = []
			},
			//搜索框输入
			searchKeyFun() {
				this.searchKey = ''
			},
			goDetail() {
				uni.navigateTo({
					url: '../goodsStockDetail/goodsStockDetail'
				})
			},
		},
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		// border-top: 20rpx solid #DBDBDB;
		margin-top: 20rpx;
	}
	.goodsStockSum{
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		.goodsStockSumRight{
			color: #EA655E;
		}
	}
		.bot-btn-wrap {
			display: flex;
		    position: fixed;
		    left: 0;
		    bottom: 0;
		    bottom: 0;
		    z-index: 90;
		    width: 100%;
		    padding: 20rpx 0;
		    background-color: #fff;
		    border-top: 2rpx solid #eee;
		}
	.mix-btn-content{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35%;
		height: 60rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
		box-shadow: 0px 4rpx 20rpx 0px rgba(83, 0, 0, 0.24);
		position: relative;
		
		&:after{
			content: '';
			position: absolute;
			left: 50%;
			top: 25%;
			transform: translateX(-50%);
			width: 85%;
			height: 85%;
			/* background: linear-gradient(131deg, rgba(255,115,138,1) 0%, rgba(255,83,111,1) 100%); */
			
			border-radius: 100rpx;
			opacity: 0.4;
			filter:blur(10rpx);
		}
		&.disabled {
			opacity: .65;
		}
		.mix-text{
			position: relative;
			z-index: 1;
		}
		.mix-icon{
			position: relative;
			z-index: 1;
			margin-right: 8rpx;
		}
		.loading-icon{
			width: 34rpx;
			height: 34rpx;
			transform-origin:50% 50%;
			margin-right: 16rpx;
			animation: rotate 2s linear infinite;
			position: relative;
			z-index: 1;
		}
	}
	@keyframes rotate{
		from {
			transform:rotate(0deg)
		}
		to {
			transform:rotate(360deg)
		}
	}

	.rukuButton {
		padding: 0 40rpx;

		.rukuBtn {
			width: 100rpx;
			background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
			text-align: center;
			border-radius: 20rpx;
			float: right;
			padding: 5rpx 0;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.goodsStockName {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		.goodsStockNameLeft {
			width: 450rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 32rpx;
			font-weight: 600;
			color: #111111;
		}

		.goodsStockNameRight {
			font-size: 28rpx;
			font-weight: 400;
			color: #EA655E;
		}
	}

	.goodsStockInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		.goodsStockInfoLeft {
			font-size: 28rpx;
			color: #999999;
		}

		.goodsStockInfoRight {
			font-size: 28rpx;
			color: #111111;

			.redColor {
				color: #EA655E;
			}
		}
	}
	.setupInput , .updataButton{
		border: 1px solid #ddd;
		border-radius: 40rpx;
		padding: 10rpx 32rpx;
		height: 80rpx;
	}
	.updataButton{
		display: flex;
		justify-content: center;
		height: 100rpx;
		align-items: center;
		background: #DDDDDD;
		font-size: 19px;
		font-weight: 500;
		color: #FFFFFF;
		width: 90%;
		margin: 20rpx auto;
	}
	.yesClick{
		border: none;
		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
		border-radius: 50rpx;
	}
</style>
